<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>用户</cite></a>
    <a><cite>用户列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body">
          <div class="layui-form-item">
            <div class="layui-inline">
              <div class="layui-btn-group test-table-operate-btn" style="margin-bottom: 10px;">
                <button class="layui-btn ts-user-table-operate" data-type="add"><i class="layui-icon">&#xe654;</i>添加用户</button>
                <!--<button class="layui-btn ts-user-table-operate" data-type="imp"><i class="layui-icon">&#xe619;</i>导入用户</button>
                <button class="layui-btn ts-user-table-operate" data-type="exp"><i class="layui-icon">&#xe61a;</i>导出用户</button>
                <button class="layui-btn ts-user-table-operate" data-type="lock"><i class="layui-icon">&#xe673;</i>锁定用户</button>
-->
              </div>
            </div>
            <div class="layui-inline">
              <div class="ts-user-table-btn" style="margin-bottom: 10px;">
                <label class="layui-form-label">姓名</label>
                <div class="layui-inline">
                  <input class="layui-input" type="text"  name="userName" id="userName" autocomplete="off">
                </div>
              </div>
            </div>
            <div class="layui-inline " style="margin-bottom: 10px;">
              <div class="ts-user-table-btn" style="margin-bottom: 10px;">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-inline">
                  <input class="layui-input" type="text" name="telNumber" lay-verify="telNumber" id="telNumber" autocomplete="off" >
                </div>
                <button class="layui-btn ts-user-table-operate" data-type="reload">搜索</button>
              </div>
            </div>
          </div>
         <!-- </form>-->
          <table class="layui-hide" id="ts-user-table" lay-filter="ts-user-table">
          </table>
          <script type="text/html" id="ts-user-table-operate-bar">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="setUserRole">角色用户</a>
          </script>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use(['admin', 'table','format','common','xtree','form'], function(){
    var index = layer.load(2); // 添加渲染动画
    var admin = layui.admin ;
    var table = layui.table;
    var basePath = layui.common.basePath;
    var xtree = layui.xtree;
    var form = layui.form;
    //初始化列表数据
    table.render({
      elem: '#ts-user-table'
      ,url: basePath + '/system/tsUser/ajaxListSUser.do'
      ,where: {
        access_token: layui.data('layuiAdmin').access_token
      },done: function(res){
        //alert('加载中');
        if(res.code == 1001){
          layer.close(index);
          layui.admin.exit();
        }
        layer.close(index);
      }
      ,cellMinWidth: 250
      ,limit: 10
      ,cols: [[
         {field:'userId',checkbox: true, fixed: true }
        ,{field:'userName', title: '用户名',   sort: true, fixed: 'left',width: 150}
        ,{field:'deptName', title: '部门', sort: true,width: 200}
        ,{field:'telNumber', title: '联系电话', sort: true,width: 140}
        ,{field:'qqNumber', title: 'QQ', sort: true,width: 140}
        ,{field:'weixinId', title: '微信号', sort: true,width: 140}
        ,{field:'islock', title: '锁定状态', sort: true,width: 100
          ,templet: function(d){
            var ret ='' ;
            if(d.islock == 0){
              ret = '正常'
            }else{
              ret = '锁定'
            }
            return '<span>'+ ret +'</span>'
          }
        }
        ,{field:'remark', title: '备注', sort: true,width: 140}
        ,{field:'status', title: '用户状态', sort: true,width: 100
          ,templet: function(tsUser){
            var ret ='' ;
            if(tsUser.status == 0){
              ret = '正常'
            }else{
              ret = '停用'
            }
            return '<span>'+ ret +'</span>'
          }
        }
        ,{field:'createTime', title: '创建时间', sort: true,width: 150
        , templet:
          function (tsUser){
            return layui.format.UnixToDate(tsUser.createTime/1000,true);
          }
        }
        ,{field:'creator', title: '创建人', sort: true,width: 150}
        ,{field:'modifyTime', title: '修改时间', sort: true,width: 150
          , templet:
                function (tsUser){
                  return layui.format.UnixToDate(tsUser.modifyTime/1000,true);
                }
         }
        ,{field:'modifyer', title: '修改人', sort: true,width: 150}
        ,{width:250, align:'center', fixed: 'right', toolbar: '#ts-user-table-operate-bar'}
      ]]
      ,page: true
      , height: 'full-280'
    });
    /**
     * 列表数据查询方法
     */
    var $ = layui.$, active = {
      reload: function(){
        var userName = $('#userName');
        var telNumber = $('#telNumber');
        //执行重载
        table.reload('ts-user-table', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
            // 新增搜索条件 ，进行搜索
              userName: userName.val(),
              telNumber: telNumber.val()
          }
        });
      }
      ,add: function(){
        location.hash = '/user/user/add'
      }
      ,imp: function(){
        layer.msg('导入用户 研发中');
      },
      exp: function(){
        layer.msg('导出用户 研发中');
      },
      lock: function(){
         alert('锁定用户');
      }
    };
    //高级查询方法
    $('.ts-user-table-operate').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    /**
     * 监听表格选中事件
     * */
    table.on('checkbox(ts-user-table)', function(obj){
      console.log(obj)
    });
    /**
     * 监听工具条,单行的 删除修改 和 删除 ;
     */
    table.on('tool(ts-user-table)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        location.hash = "/user/user/detail/userId="+ data.userId  ;
      } else if(obj.event === 'del'){
        var array = [] ;
        array.push(data);
        layer.confirm('用户删除后不可恢复！', function(index){
          layer.close(index);
          console.log(JSON.stringify(data));
         var index_ajax = layer.load(2);
          admin.req({
            url: 'system/tsUser/delTsUser.do?tsUserList='+JSON.stringify(array) //实际使用请改成服务端真实接口
            ,type:'get'
            ,done: function(res){
              layer.close(index_ajax);
              if(res.code == 0){
                layer.msg(res.msg, {
                  offset: '15px'
                  ,icon: 1
                  ,time: 1000
                }, function(){
                  active['reload'] ? active['reload'].call(this) : '';
                });
              }else {
                layer.msg(res.msg, {
                  offset: '15px'
                  , icon: 2
                  , time: 1000
                }, function () {
                });
                return ;
              }
            },success:function (res) {
              layer.close(index_ajax);
              console.log(res)
            },error:function (res) {
              layer.close(index_ajax);
              console.log(res)
            }});
        },function(){
          //layer.alert('取消');
        });
      } else if(obj.event === 'edit'){
        location.hash = "/user/user/edit/userId="+ data.userId  ;
      } else if(obj.event === 'setUserRole'){
        layer.open({
          type: 1,
          area: ['420px', '400px'],
          title: '配置用户角色',
          scrollbar: true,
          btn: ['确定', '取消'],
          content: '<form id="tree_form" class="layui-form"><div id="xtree1" style="width:400px;overflow:auto;padding: 10px 0 25px 5px;"></div></form>', //注意，如果str是object，那么需要字符拼接。
          yes: function (index, layero) {
            var checkedList = xtree3.GetAllChecked();
            var checkedRoleIdList = new Array();
            $.each(checkedList, function (index, item) {
                checkedRoleIdList.push(item.defaultValue);
            });
            submitTsUserRole(layer, index, admin, data.userId, checkedRoleIdList.join(','));
          },
          btn2: function (index) {
            layer.close(index);
          },
          cancel: function () {

          }
        });

        var param = 'access_token=' + layui.data('layuiAdmin').access_token + '&userId=' + data.userId;
        var xtree3 = new xtree({
          elem: 'xtree1'                  //(必填) 放置xtree的容器，样式参照 .xtree_contianer
          , form: form                    //(必填) layui 的 from
          , isopen: true
          , data: basePath + 'system/tsUserRole/findRoleTree.do?' + param //(必填) 数据接口，需要返回以上结构的json字符串
        });
      }
    });

    // 设置用户角色
    function submitTsUserRole(layer, index_ajax, admin, userId, checkedRoleIdList) {
      admin.req({
        url: basePath + 'system/tsUserRole/setUserRole.do',
        type: 'post',
        data: {
          access_token: layui.data('layuiAdmin').access_token,
            userId: userId,
            checkedRoleIdList: checkedRoleIdList
        },
        done: function (res) {
          layer.close(index_ajax);
          if (res.code == 0) {
            layer.msg(res.msg, {
              offset: '15px'
              , icon: 1
              , time: 1000
            });
          } else {
            layer.msg(res.msg, {
              offset: '15px'
              , icon: 2
              , time: 1000
            }, function () {
            });
            return;
          }
        }, success: function (res) {
          layer.close(index_ajax);
          console.log(res)
        }, error: function (res) {
          layer.close(index_ajax);
          console.log(res)
        }
      });
    }

  });
</script>